<template>
  <el-popover :placement="getPopDirection(info)" :visible="isShowPanel" :show-arrow="false" popper-class="nopopper" :offset="getOffsetPosition(info)">
    <template #reference>
      <LocationPoint :location="{x: info.x, y: info.y}" :class="{topindex: isShowPanel}">
        <div class="CameraOnMap">
          <div class="CameraOnMap--img" @click="showDetail">
            <img src="@/assets/images/armyScreen/摄像头_常规@2x.png" />
          </div>
          <!--<div class="CameraOnMap&#45;&#45;content" v-if="isShowPanel">-->
          <!--  <MapVedioPanel :info="info" @close="closeAction"></MapVedioPanel>-->
          <!--</div>-->
        </div>
      </LocationPoint>
    </template>
    <MapVedioPanel :info="info" @close="closeAction" v-if="isShowPanel"></MapVedioPanel>
  </el-popover>

</template>

<script setup>
import MapVedioPanel from '@/views/armyScreen/warehouse/center/MapVedioPanel.vue'
import LocationPoint from '@/views/armyScreen/warehouse/center/LocationPoint.vue'
import $bus from '@/util/bus.js'
const props = defineProps({
  detail: { // 是否打开详情, 默认是 false，表示不打开
    type: Boolean,
    default: false
  },
  info: {
    type: Object,
    default() {
      return {
        "cameraIndexCode": "fcd253f41fdd4f799c099997373b574c",
        "cameraName": "研发大门口",
        "x": "0",
        "y": "0",
        "hasAlarm": false,
        "alarmRecord": []
      }
    }
  }
})
/*********** 生命周期 ************/
onMounted(() => {
  if (props.detail) {
    showDetail()
  }
})
onBeforeMount(() => {
  $bus.on('hidePanel', closeAction)
})

onBeforeUnmount(() => {
  $bus.off('hidePanel', closeAction)
})

// 获取弹窗的位置
function getPopDirection(info) {
  const { x, y } = info
  let direction = ''
  const yMiddle = 1080 / 2
  // const xMiddle = 1920 / 2
  const leftPanel = 400
  const rightPanel = 1920 - leftPanel
  if (x < leftPanel) {
    // 在左侧面板内，靠右显示
    direction = 'right'
  } else if (x > rightPanel) {
    direction = 'left'
  } else if (y > yMiddle) {
    direction = 'top'
  } else if (y <= yMiddle) {
    direction = 'bottom'
  }
  return direction
}

function getOffsetPosition(info) {
  const direction = getPopDirection(info)
  if (direction === 'top') {
    return 45
  } else {
    return 0
  }
}

/*********** 显示和隐藏详情面板 ************/
const isShowPanel = ref(false)
function showDetail () {
  $bus.emit('hidePanel')
  isShowPanel.value = true
}
function closeAction () {
  isShowPanel.value = false
}
</script>

<style lang="scss" scoped>
.CameraOnMap{
  position: absolute;
  left: -27px;
  top: -60px;
  pointer-events: all;
  &--img{
    width: 53px;
    height: 68px;
    cursor: pointer;
    img{
      width: 100%;
      height: auto;
    }
  }
}
</style>
